マテリアルデザインに魂を売った男の末路 Color編

執筆者：中山大悟

執筆年：2018年

※主は英語と日本語が得意ではありません。

赤文字は間違った例

黄色文字は好ましくない例

緑文字は正しい例

きっとあなたもカラーパレットを眺めればマテリアルデザインの虜間違いなしです！！

カラーシステム

カラーシステムは、あなたのブランドやスタイルを反映するカラーテーマを作成を助けます。

1. 色の使い方とパレット

マテリアルデザインのカラーシステムでは、体系化されたアプローチを使用してUIにカラーを適用します。

このシステムでは、通常、ブランドを表すためにプライマリとセカンダリの色が選択されます。

それぞれの色の濃淡は、さまざまな方法でUIに適用できます。

色とテーマ

あなたのアプリのプライマリとセカンダリの色、そしてそれらのバリエーションは、調和し、可読性の高いテキストを保証し、UI要素とサーフェスを互いに区別するためのカラーテーマを作成するのに役立ちます。

プライマリとセカンダリの色を選択し、それぞれの明るい色と暗い色を生成するには、マテリアルデザインパレットツール、テーマエディタ、または2014マテリアルデザインパレットを使用します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1G9utlx7O2-lxBVs5e3BbWq7kbAdXMwOE%2Fcolor-colorsystem-usagepalettes-1.png

セカンダリとプライマリのカラーパレットサンプル

2. カラーテーマの作成

基本的なマテリアルカラーテーマ

マテリアルデザインには、そのままの形で使用できる基本的のテーマが組み込まれています。

これには、プライマリ、セカンダリ、およびそのバリエーションのデフォルトカラーが含まれます。

この基本テーマには、背景、サーフェス、エラー、タイポグラフィ、アイコンの色など、UIを定義する追加の色も含まれます。 これらの色はすべてあなたのアプリに合わせてカスタマイズできます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1hg4iTKzTMMgtJRx7bhaE2kSYR5BRYz1g%2Fcolor-colorsystem-schemecreation-theme.png

プライマリカラー

プライマリカラーは、アプリの画面とコンポーネント全体で最も頻繁に表示される色です。

セカンダリカラーがない場合は、プライマリカラーを使用してアクセントにすることもできます。

プライマリカラーのバリエーション

プライマリカラーには暗めと明るめの主要なバリエーションがあります。

あなたはプライマリカラーを使用して、アプリケーションのカラーテーマを作成することができます。

UI要素を区別する

一番上のアプリケーションバーとシステムバーを区別するなど、UI要素間のコントラストを作成するには、各要素にプライマリの明るい色や暗い色を使用できます。

バリエーションを使用して、フローティングアクションボタンコンテナで使用されるさまざまなバリエーションやその中のアイコンなど、コンポーネント内の要素を区別することもできます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1LpI_jDbOurvKaj-Xj0EvOuyjx0IuWFPB%2Fcolor-colorsystem-schemecreation-primary-baseline-2.png

このUIでは、プライマリカラーと2つの主要なバリエーションが使用されます。

セカンダリカラー

セカンダリカラーを使用すると、プロダクトをアクセントにして区別するための方法が増えます。

セカンダリカラーを使用することは任意であり、UIの選択部分を強調するために余分に適用する必要があります。

セカンダリカラーは次のように使用するのが最適です。

フローティングアクションボタン

選択コントロール（スライダーやスイッチなど）

選択したテキストを強調表示する

プログレスバー

リンクと見出し

セカンダリカラーのバリエーション

セカンダリカラーには暗めと明るめのバリエーションがあります。

あなたはセカンダリカラーを使用して、アプリケーションのカラーテーマを作成することができます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F13Oed330QwZjx6LCPqXlIiWPzVI_fZZh8%2Fcolor-colorsystem-schemecreation-secondary-baseline-1.png

このUIでは、プライマリ、プライマリバリエーション、セカンダリカラーのカラーテーマが使用されます。

サーフェス、背景、エラーの色

サーフェス、背景、およびエラーの色は、通常ブランドを表していません。

サーフェスの色は、カード、シート、メニューなどのコンポーネントのサーフェスに影響します。

背景色はスクロール可能なコンテンツの後ろに表示されます。 基本の背景とサーフェスの色は#FFFFFFです。

エラーの色は、テキストフィールドなどのエラーコンポーネントを示します。 基本のエラーの色は＃B00020です。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1hn9Ffe7iuhpl4HpJsIC6ikz0IPMwEfcJ%2Ftheming-color-surfacesbgs.png

タイポグラフィとアイコングラフィの色

"On" Color

アプリ内の要素は、カラーパレット内の特定のカテゴリのカラー（プライマリカラーなど）を使用します。

これらの色を使用してテキストやアイコンなどの他のスクリーン要素がサーフェスの前面に表示されるときは、それらの要素は、その背後の色に対してはっきりと見やすく表示されるように特別に設計された色を使用する必要があります。

場合によっては、サーフェスにも適用されることがあります。

これらの色のデフォルトは#FFFFFFと＃000000です。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1jTwR_tLfYC3x-B1bD8hN7Nza9x2y1Kny%2Ftheming-color-oncolors.png

可読性の高い色

明るい色や暗い色のテキストの背後に可読性を高める背景を提供するために、明るい色と暗い色のバリエーションを使用することができます。

また、これらの色は、明るい背景と暗い背景の前に表示されるタイポグラフィに使用できます。

色見本

色見本は、類似の色の範囲から選択された色のサンプルです。

白色のチェックマークは、白色のテキストが背景色で判読可能なときを示します

黒色のチェックマークは、黒色のテキストが背景色で判読可能なときを示します

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1PqH1prDsSruO48qhgq6ZkuG-GSVVixMR%2Fcolor-colorsystem-schemecreation-accessibility-2.png

白いテキストを使用するアプリの場合、背景は白いものが判別可能でなければなりません。

これらの白いチェックマークは、白いテキストがさまざまな背景色の見本にアクセスできるときを示します。

400の色がこのUIに適用されます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F19cntUn82CP2Tx-oNjQpVAaamndQu7RSI%2Fcolor-colorsystem-schemecreation-accessibility-3.png

黒いテキストを使用するアプリの場合、背景は黒色で判別可能でなければなりません。

これらの黒のチェックマークは、さまざまな背景色の見本に対して黒のテキストがいつアクセス可能かを示します。

50の色がこのUIに適用されます。

オルタナティブカラー

マテリアルデザインのカラーシステムは、あなたのブランドのプライマリおよびセカンダリカラーの代替として使用されるカラーであるオルタナティブカラーをサポートしています。

アプリはオルタナティブカラーを使用して、異なるセクションを区別するテーマを設定できます。

オルタナティブカラーは次のように使用するのが最適です

明るいテーマと暗いテーマのアプリ

異なるセクションの異なるテーマのアプリ

一連の製品の一部として存在するアプリケーション

オルタナティブカラーは、既存のカラーテーマと一貫して実装することが難しいため、慎重に使用する必要があります。

セクションテーマのオルタナティブカラー

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1Jo9yjAaKpYl3jijuskjU6_pfmML7n7B5%2Fcolor-colorsystem-schemecreation-altprimarysecondary-3.png

このアプリは3つのプライマリカラーを持っています。

独自のテーマはアプリのさまざまな部分で使用されるため、ユーザーはオリジナリティを表しやすくなります。

テーマ1

黄色は、オンボーディングや関心領域の選択などの領域の原色として使用されます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F181H5cwjIitZNB5aMubkSHjqfBAr8mos2%2Fcolor-colorsystem-schemecreation-altprimarysecondary-4.png

テーマ2

青色は、選択したクラスなど、ユーザーの個人アカウントに関連するアプリケーションの領域の主要な色として使用されます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1gNgK8xWBxDYQSuNvK1MoS3kFfPbetcgs%2Fcolor-colorsystem-schemecreation-altprimarysecondary-5.png

テーマ3

ピンクは、クラスの原色として使用されます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1SDGX3-el7fSZgwPwWVnMr7ri00_YV-Al%2Fcolor-colorsystem-schemecreation-altprimarysecondary-6.png

データビジュアライゼーションのための追加カラー

アプリは、主な色のテーマの外にあるカテゴリを伝達するために追加の色を使用できます。

それらは依然としてフルカラーパレットの一部です。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1Cr__9NRDY9K--yaovyZdora4YWV5bICC%2Fcolor-colorsystem-schemecreation-dataviz.png

このアプリは、同じページに複数のデータビジュアライゼーションが表示されているときに5つの追加色のカラーテーマを使用しています。

3. 色を選ぶためのツール

マテリアルカラーパレットの生成

マテリアルパレットジェネレータを使用して、入力した任意の色のパレットを生成できます。

色相、彩度、明度をアルゴリズムで調整することで、使用可能で美的にも魅力的なパレットが作成されます。

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

UIにカラーを適用

1. 基本

このガイドラインでは、色使いが重要なさまざまなUIコンポーネントと要素について説明します。

原則

色はUI全体に一貫して適用され、それが表すブランドと互換性があります。

色は要素間を区別するのに十分なコントラストを表現する。

色は要素と階層間の関係など、複数の意味を伝えることができるため、セマンティックに適用する必要があります。

色を上部および下部のアプリケーションバーに適用する方法は、ユーザーがそれらを識別し、周囲のUI要素との関係を理解するのに役立ちます。

アプリバーの識別

上部と下部のアプリケーションバーには、アプリのプライマリカラーを使用します。

システムバーは、主要な色の濃い色や明るい色のバリエーションを使用して、システムのコンテンツを上部のアプリケーションバーのコンテンツから分離することができます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F14-9xXVeT33twoPmcfkgftEtP3QdRtDpm%2Fcolor-applyingcolorui-bars-differentiating-baseline.png

このトップアプリケーションバーではプライマリカラー（Purple500）が使用され、システムバーでは暗いプライマリバリエーション（Purple700）が使用されています

アプリケーションバーと他のサーフェスとの違いを強調するには、FABなどの近くのコンポーネントでセカンダリカラーを使用します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1TeQ0O5CvwY52_xe4UTvJG_fqFfBR2F7d%2Fcolor-applyingcolorui-bars-differentiating-reply.png

このボトムアプリケーションバーではプライマリカラー（Blue700）が使用され、FABではセカンダリカラー（Orange500）が使用されています。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1HKWq9v3FYCQkhLduuLfETGNROTh2v7AQ%2Fcolor-applyingcolorui-bars-differentiating-caution-1.png

ボトムアプリケーションバーとフローティングアクションボタンが同じ色である場合は、シャドウまたは代替手段を使用して、それらの要素を十分に区別します。

バックグラウンドとアプリバーを組み合わせる

トップまたはボトムのアプリバーの色が背景色と同じ色である場合、その構造の代わりにアプリのコンテンツに重点を置いて融合します。

しかし、スクロールでは、上部のアプリケーションバーは、その背後にスクロールするコンテンツよりも高いエレベーションを持っていることを影で示している。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1N1dkxH874um0ieoX7ftR1t65Foip7Kz7%2Fcolor-applyingcolorui-blendedbars-owl.png

このアプリの明るくシームレスなレイアウトでは、アプリバー、ボトムナビゲーション、背景色には青色（Blue700）の主要な色が使用されているため、個々の要素が目立ちにくく、内容が目立ちます。

アクティブなアイコンでは、2次黄色が使用されます。

サーフェス間のエレベーションの分割を示すために、ボトムナビゲーションに影が含まれています。

背景には表と裏のレイヤーがあります。

これらの2つのレイヤーを区別するために、基本的なのバックレイヤーの色はプライマリカラーで、ベースラインのフロントレイヤーはホワイトです。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1H9ZMgMwTh3usXcum_NtXvF-BC5XDwDoo%2Fcolor-applyingcolorui-surfaces-surfaceelevations-crane.png

このアプリはバックグラウンドのバックレイヤーにプライマリカラー（Purple800）を使用しています。

テキストフィールドは一段明るいバリエーション（Purple700）です。

フライト運賃にはセカンダリカラー（Red700）がアクセントとして適用されます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1oCXUwiC-RwYb7Kax3c9EXB32-giyK9KY%2Fcolor-applyingcolorui-surfaces-surfaceelevations-shrine.png

このアプリは、バックグラウンドのバックレイヤーにプライマリカラー（Pink100）を使用し、タイポグラフィーとアイコンアートのためにプライマリダークバリエーション（Pink900）を使用します。

さらに、セカンダリlアラー（Pink50）は、フロントレイヤーの拡大シートに使用されます。

4. シートとサーフェス

ボトムシート、ナビゲーションドロワー、メニュー、ダイアログ、カードなどのシートとサーフェスの基本カラーは白です。

これらのコンポーネントは、他のサーフェス間のコントラストを作成するために色をつけることができます。

コントラストは、サーフェスが重なり合ったときの標高差を示すサーフェスエッジを明示することができます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1X06khtT-cJR-KdPkF1iMOTit-0W_mm1R%2Fcolor-applyingcolorui-surfaces-baseline-alt.png

モーダルシート

ナビゲーションドロワーやボトムシートなど、一時的に画面上に表示されるサーフェスには、対照的な色を使用します。

通常、これらのサーフェスは白ですが、アプリのプライマリまたはセカンダリカラーを使用できます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1WgsN8UsNQ-8HPUreTo7XBumHtPUXZEaN%2Fcolor-applyingcolorui-surfaces-tempsurfaces-reply.png

このアプリは、下部のナビゲーションドロワーのプライマリカラーの青色（Blue700）、アカウントスイッチャーは暗めのバリエーション（Blue800）、および選択のためのセカンダリカラー（Orange500）を使用しています。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F14zHSXN3Pqb0u6cs2vRe1bXWqeyYceoBZ%2Fcolor-applyingcolorui-surfaces-tempsurfaces-fortnightly.png

このアプリはモーダルナビゲーションドロワーにプライマリカラー（白）を使用し、暗いタイポグラフィーとナビゲーションの間の最大のコントラストを作り出します。

ナビゲーションドロワーはバックグラウンドと同じ色であるため、白いスクリムを使用してその背後にあるコンテンツを目立たなくします。

タップすると、シートが広げられます。

カードの基本カラーの色は白です。

このカラーは、ブランドを表現するか、または読みやすくするためにカスタマイズできます。

カードのテキストとアイコンは、読みやすさを向上させるためにカラーテーマを使用することもできます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1Bx9m-4bkrdG0A70gyc3lfNIcK4SVdB47%2Fcolor-applyingcolorui-surfaces-cards-baseline.png

これらのカードのサーフェスはプライマリカラー（purple500）を使用します。

アプリの背景色は白です。 セカンダリカラー（teal200）は、データビジュアライゼーションに使用されます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1pqTSSslxXQOOX2xe4QR7V_78hFKXSL9T%2Fcolor-applyingcolorui-surfaces-cards-legibility-baseline-1a.png

画像の前にカードのテキストとアイコンが表示されていると、読みにくい場合があります。

読みやすさを向上させるために、色を使用してテキストとアイコンのサーフェスを作成できます。

ボタン、チップ、選択コントロールは、プライマリまたはセカンダリカラーを適用することによって強調することができます。

カラーカテゴリー

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1zLNV4RGoG_wLK5uWGaSv3YJEQyLFWggH%2Fcolor-applyingcolorui-inputselectioncontrols-baseline.png

このアプリのカラーテーマは、プライマリカラー（purple600）とセカンダリカラー（teal200）とプライマリのバリエーション（purple500）で構成されています。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1DXBhYuYkW_TXBIukiktwwbSyPN6j__t1%2Fcolor-applyingcolorui-inputselectioncontrols-buttonschips-dont-crane.png

選択コントロールは、アプリケーションのセカンダリカラーを継承できる

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1X3cL9k8e4cVprYeOqVz6lPcy5PVgGeQJ%2Fcolor-applyingcolorui-inputselectioncontrols-buttonschips-do-crane.png

あなたのブランドカラーの1つをワーニングカラーに使用しないでください

フローティングアクションボタン（FAB）は、画面上で最も目立つアイテムの1つである必要があります。

色を駆使して、FABと周囲の要素（アプリバーなど）とのコントラストを作成します。

FABで使用する基本カラーはセカンダリカラーです。

あなたの画面上で多くの色を使用する場合、FABはコンテンツから目立たせるために単色の色を使用することができます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1p6FTUAkwDuOFz4rma2DtlPCzgpa067Eo%2Fcolor-applyingcolorui-inputselectioncontrols-fab-reply.png

このアプリケーションのセカンダリカラー（orange500）は、周囲のUIとは対照的に、FABに適用されます

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1_PrF7_aKQuCdLcQLh4gbLeLrBuNzelNo%2Fcolor-applyingcolorui-inputselectioncontrols-fab-posivibes.png

このアプリのカラーテーマは、すべてのボタン、選択コントロール、およびアイコンに、プライマリホワイトとセカンダリブラックを使用しています。

これらのコンポーネントは、鮮明で多色のコンテンツと対照的であるため、一層際立ちます。

6. タイポグラフィとアイコングラフィ

色は、特定のテキストが他のテキストよりも重要度が高いか低いかを表すのに有効です。

画像や背景の上に置かれたテキストは読みにくくなる可能性がありますが、色を上手く使うことでテキストを認識しやすくなります。

タイポグラフィの重要度

色は、テキストの可視性と重要度の両方を高めることができます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1pB6APqAPaoNv8E8de2yZ4W6xiWCb8hn-%2Fcolor-applyingcolorui-typography-baseline-alt.png

このアプリのカラーテーマは、プライマリカラー（purple500）とセカンダリカラー（orange600）で構成されています。

オレンジ色でカードの見出しが強調され、タブやボタンに紫色が使用されています。

見出しとタブ

重要なテキスト（タブや見出しなど）は、プライマリまたはセカンダリカラーを使用できます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1rvaAVADe9BHPLaEX0Dn-pVt3tcYoMoJK%2Fcolor-applyingcolorui-typography-headlinetabs-basil-1.png

このアプリはセカンダリカラー（orange800）を使用してアクセントをつけ、見出しに注意を促します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1gibjXrj9TA39oO2yJJoADuubUwRUtJ6a%2Fcolor-applyingcolorui-typography-headlinetabs-basil-2.png

このアプリはタブのプライマリカラー（green800）を使用して、選択された状態と選択されていない状態を示す重要度の変更を行います。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1RX4q08pisw09OlZlvXvz_ym-1_RcyfcY%2Fcolor-applyingcolorui-typography-headlinetabs-do-owl-1.png

プライマリまたはセカンダリの色を使用して、見出しなどの短いテキストを強調します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1doB3mObpePgGER3iBlog3xKveOuVtjvT%2Fcolor-applyingcolorui-typography-headlinetabs-do-owl-2.png

プライマリまたはセカンダリカラーを使用してアクセントのリンクにすることができます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F19_Pi3IGhl8-fPSjUDZ2jJwZgGphp-rE1%2Fcolor-applyingcolorui-typography-headlinetabs-caution-owl-1.png

本文テキストに明るいプライマリまたはセカンダリカラーを使用しないでください。

テキストの読みやすさ

テキストが画像の上に置かれると、読みやすさの問題につながります。

テキストと画像の間に色付けされたレイヤーを作成することで、テキストを読みやすくすることができます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1jU_9n9xI2MGwUtEWxTwmwIv5GLPgbhUQ%2Ftextlegibility-posivibes-2.png

このアプリは、上に置かれてるテキストが見やすくなるように画像の上に黄色のスクリムを適用します。

アイコン

アイコンは、それによってどんなアクションが起きるのかといった情報を提供するのに役立ちます。

アイコンの色は背景と対照をなして、それらが読みやすく識別可能であることを保証しなければなりません。

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

色の使い方

色は以下の事を行うのに役立ちます。

階層を表す

ブランドの確立

意味を与える

要素の状態を示す

1. 階層

要素の色が周囲と対照をなしている場合、その要素が目立つため、ユーザーにそれが重要であると伝えることができます。

またカラーテーマには、どの要素が重要かを示すさまざまな方法があります。

例えば、黒いアイコンは、白い背景に置かれたときに目立ち認識しやすくなります。

多色のカードは、単色の色の隣に置かれたときに、自分自身に注意を引きます。

サーフェスのコントラスト

重要なイベントに注目させるには、要素間でより強い色のコントラストを使用します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1ZQ9JTBxsUSJqr3zvnuxpmHSvNeD70Jtz%2Fcolor-hierarchybrand-hierarchy-surfacecontrast-crane.png

紫色の背景は白い表面と高いコントラストを持ち、このアプリの要点であるリストアイテムの選択肢に重点を置いています。

色と形

視覚的に強調するには、要素の色と形の両方を同時に変化させることで与えられます。

この強調を使用して、何が選択されたか、または直ちに注視する必要があることを示します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1KJfYanLvAfjHcqfPuyKgkaLoZVx2l1D2%2Fcolor-hierarchybrand-hierarchy-colorshape-owl.png

左隅がカーブしたビンク色のチップは、それらがユーザによって選択されたことを示します。

色を制限する

アプリでの色の使用を制限することで、テキスト、画像、個々のボタンなどの要素に、より多くの関心を集めることができます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1G9__hcY_1UtcSpmjlsLCY7ABDEo6owB4%2Fcolor-hierarchybrand-hierarchy-limitingcolor-posivibes.png

上記のプロダクトのコンテンツは多色であるため、黒色のFABは鮮やかな色と大きく異なっており、より見やすくなります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F14abLQm4cq95N5VIkFtuy_XX9NCsXPE7c%2Fcolor-hierarchybrand-hierarchy-limitingcolor-fortnightly.png

グレースケールカラーパレットは、写真とテキストを目立たせるのに最適です。

2. ブランド

ブランドは、ブランドカラーを使用することで、その存在を強調することができます。

ブランドカラーは、重要なタイミングで、特定の行動や情報に関連付ける形で使用できます。

ブランドのカラーアプリケーションは、大胆で斬新で洗練された、あるいはその間のどこでもいいでしょう。

また、あなたのブランドカラーに対する個人的なアプローチは、あなたのアプリに反映されるべきです。

大胆な色使い

エネルギーと興奮の感覚を伝えたいブランドは、大胆に色を使います。

アプリには、このブランドへのアプローチを反映しますが、コンテンツの読みやすさと全体的なユーザビリティは維持されています。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1DhsbW_nnO3zxy8opzKKwA4Zaf8_lsqdF%2Fcolor-hierarchybrand-brand-boldcolor-owl.png

上記のアプリは、ブランドの精神にぴったりとした、大胆で飽和したブランドの色（黄色、青色、マゼンタ）を鮮やかに使用しています。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1aR6p7w4xdudpG6Njwx1c3YMLLMWdtZC3%2Fcolor-hierarchybrand-brand-boldcolor-basil.png

上記のアプリの色とタイポグラフィへの大胆な取り組みは、見やすく使い心地に優れ、エネルギーと興奮をユーザにもたらします。

控えめな色を持つブランドでさえ、大胆な方法で色を使うことができます

起動画面

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1VM7M22BhQQiaXB4oNz2SG9aq3R8lHjEZ%2Fcolor-hierarchybrand-brand-boldcolor-launchscreen-rally.png

起動画面は、大胆な方法で色を使用する瞬間です。

オン・ボーディング

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1rt4TnKya5zn4Q_W2wV2iUzI36YHRO6qb%2Fcolor-hierarchybrand-brand-boldcolor-onboarding-baseline.png

オン・ボーディング中に使用される色は、コンテンツにブランドの特色を持たせることができます。

機能の発見

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1rMWBwI9lo71HDDVZc3KGIPgslSBP7QDN%2Fuseredu-er-featuredisc-design-01.png

新しい機能を強調表示して、色を使ってユーザーの注目を導くようにすることができます。

控えめな色使い

ブランドは洗練されたものを伝えること、内容を強調すること、または他の方法でコンテンツを適合させることなど、控えめな方法で色を使用することができます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1O9UWpW4XXXvR1MwVf-dEYDWmvZ5dDpd3%2Fcolor-hierarchybrand-brand-subtlecolor-rally.png

このアプリは、グラフのデータなどの情報を表示するために少量の色を使用しています。

この方法で色を使用すると、情報がブランドの色につながります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1D5QMUSWNOoPmpyUU_wxE8jbUoNKEBcYr%2Fcolor-hierarchybrand-brand-subtlecolor-fortnightly.png

このアプリは、セカンダリカラー（purple）を控えめに使用しています。

そうすることによって、使用される場所で際立っています。

この方法を用いることでコンテンツがページ上で最も重要な要素になります。

プレースホルダUIの読み込み、進捗インジケータの表示、状態の変化の表現など、ブランドの色を瞬間的に使用することで、ブランドの存在を控えめに強調できます

プレースホルダUI

ここにブランドカラーを含めると、アプリがロードされている間はユーザはまだアプリ内にいることが示すことができます。

進捗インジケータ

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1nkO0DxY36CRIaQQU3maUuPYyXzjAz1Ec%2Fcolor-hierarchybrand-brand-subtlecolor-progress-baseline.png

進捗インジケータは、アプリの機能をブランドに結び付けるため、ブランドカラーを組み込むための控えめではあるが強力な場所です。

状態の変化

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1Xq8s_h0CANJJnxumBIOmYEaTILpZSjhX%2Fcolor-hierarchybrand-brand-subtlecolor-state.png

状態の変化は、ブランドの存在を控えめに強化することができます。

3. 意味の付与

色はUI要素ごとの異なる意味を伝えることができます。

たとえば、天気アプリは現在の気象条件を示す色を表示し、ナビゲーションアプリは交通状況を示す色を赤色または緑色で表示することがあります。

一貫性とコンテキスト

色はプロダクト内で一貫して使用する必要があります。

そのため、コンテキストが変更されても、特定の色は常に同じものを意味します。

文化的な色使いにも注意を払う必要があります。

例えば、警告にはほとんどの場合、赤色が使用され、他の色はあまり使用されません。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1baG7OQt-e2atfEMTDvNlcpn1Z-PpfMaj%2Fcolor-hierarchybrand-meaning-consistencycontext-crane.png

日付の選択は紫色の背景に対して赤で表示され、ブランドのプライマリカラー（赤色）と旅行日の選択が関連付けられます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1BN3zxZXNWy0x4szbOKcUIE827yGA7zQ4%2Fcolor-hierarchybrand-meaning-consistencycontext-dont-crane.png

赤はブランドカラーなので、エラー状態を伝えるために使用しないでください。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1id64INQrNq29EvEjy5FeGNvYwLxmA0WD%2Fcolor-hierarchybrand-meaning-consistencycontext-do-crane.png

ブランドカラーリングを使用しないように、代わりのアラートカラーを使用してください。

4. 状態

色は、アプリ、そのコンポーネント、要素の状態に関する情報を提供することができます。

微妙な色の変化が見逃される可能性があるため、状態の変化を示すときには色によって目立たせる必要があります。

アイコンの表示や要素の位置の移動など、複数の方法で状態の変化を示すのが最善です。

インタラクションを示す

特定のインタラクションを強調するには、ユーザーが操作していないコンテンツと比較して、ユーザーがインタラクションしたコンテンツに対して強い色のコントラストを使用します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1_srgghDIR-ZyTW8H3OYZA3BeHWUDIA9q%2Fcolor-hierarchybrand-state-interaction-fortnightly.png

上記の画像には、ユーザーがやり取りしていることを示す色処理が施されています。

選択肢を示す

選択した要素を強調するには、それらの要素に強い色のコントラストを使用します。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1JZncWKlq9S7MAfm8TeS956I-iYYyubXL%2Fcolor-hierarchybrand-state-selection-reply.png

上記の電子メールのリストは、色のついたコーナーシェイプを使用して、ブランドカラーを使用して選択したものを示します。

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png

テキストの可読性

色はテキストの可読性に重要な役割を果たします

1. 可読性の基準

すべてのテキストは読みやすく、アクセシビリティ基準を満たしている必要があります。

WCAG 2.0レベルAAでは、通常のテキストではテキストと背景の間に4.5.1の色のコントラストが必要で、大文字のテキストには3：1の色のコントラストが必要です。

2. テキストの背景

色の付いた背景のテキスト

明るい背景では黒のテキストを、暗い背景では白のテキストを使用することをお勧めします。

色の付いた背景やタイポグラフィでは、テキストの不透明度やさまざまなテキストの状態に関するルールが追加で変更されます。

テキストへ不透明度の使用

次のようにしてテキストの色を計算することもできます。

緑色の背景の前に透明度を下げた黒色を配置します

結果の暗くなった緑の色の16進値を特定する

その色の16進値をテキストに使用する

この場合、テキストの後ろのサーフェスが色を変更する可能性がある時は、同様に16進色を更新する必要があります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1D3aBHgWZw8KnQ7QuzjEw2Lro7zqaEesL%2Fcolor-legibility-opacity-baseline-do.png

視認性を保つために、色のついた表面に見やすい黒色のものを使用してください。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F15xtF13fInTmxsfwGSP5y83RTn52chbCk%2Fcolor-legibility-opacity-baseline-dont.png

色のついたサーフェスでは見えない見えにくい灰色のテキストを使用しないでください。

明るい背景の暗いテキスト

明るい背景(#FFFFFF)の暗いテキスト(#000000)は、次の不透明度を適用します。

高強調テキストの不透明度は100％

中強調テキストとヒントテキストの不透明度は60％

無効にされたテキストの不透明度は38％

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1GhaWa2gWZeKpAHyHoN4DMHZTD-ZqUZp5%2Fcolor-legibility-darktext.png

色付きテキストと背景

注意を引き、選択的な強調を適用するには、色付きテキストを控えめに使用する必要があります。

理想的な色付きのテキストは、見出し、ボタン、リンクなどのテキスト要素用にのみ用いる必要があります。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1TNbjGLOGGzohS1aNwt8DjBwuPWzHt7I9%2Fcolor-legibility-coloredtextbg-basil.png

大きな見出しと短いテキストスニペットは、色付きのテキストに最適です

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1kfYbsbYkSiQa9s_5k-pPWBX67AucqQGD%2Fcolor-legibility-coloredtextbg-caution-owl.png

色の付いた長い文体のコピーを読むのは難しいかもしれません

3. テキストタイプ

ヘルパーテキスト

ヘルパーテキストは、入力の使用方法など、フィールドの入力に関するコンテキストを提供します。

それはブランドカラーを採用することができますが、WCAG標準によって決定されるように読みやすくしなければなりません。

たとえば、明るい背景のヘルパーテキストは、次の不透明度とデフォルトの16進数色を適用できます。

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F10tQ1B67mEfW6RD4YTRTa0GAv7ujAwf1c%2Fcolor-legibility-helpertext.png

選択したテキスト

ブランドを反映するために、テキスト選択では、プライマリまたはセカンダリカラーのアクセントを使用できます。

選択されたテキストは選択色に対して見やすく、選択色は背景色と対比させる必要があります。

または、アウトライン、モーション、チェックマークアイコン、または選択したテキストを示すその他のテキスト処理を表示することもできます。

アイコンとその他のシンボル

アイコンやその他の要素は、WCAGの可読性基準を満たす必要はありませんが、機能を示すか情報を伝えるためにできるだけ目に見えるようにする必要があります。

たとえば、暗いアイコン(#000000)や明るい背景(#FFFFFF)の他の要素は、次の不透明度を適用できます。

アクティブなアイコンの不透明度は100％です。

非アクティブアイコンの不透明度は60％です。

使用不可能なアイコンの不透明度は38％

https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1itVLojyOM2XVrAY_MSm9TpwXK0g8QQ_z%2Fcolor-legibility-darkicon.png

https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png